<template>
  <div ref="container" class="three-container"></div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default {
  name: 'ModelViewer',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      controls: null,
      mixer: null
    }
  },
  mounted() {
    this.initThree()
    this.loadModel()
    window.addEventListener('resize', this.onWindowResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize)
    this.renderer.dispose()
    this.renderer.forceContextLoss()
    this.$refs.container.removeChild(this.renderer.domElement)
  },
  methods: {
    initThree() {
      // 初始化场景
      this.scene = new THREE.Scene()
      this.scene.background = new THREE.Color(0xdddddd)

      // 初始化相机
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )
      this.camera.position.set(5, 5, 5)

      // 初始化渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.$refs.container.appendChild(this.renderer.domElement)

      // 初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.enableDamping = true

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
      this.scene.add(ambientLight)

      // 添加平行光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
      directionalLight.position.set(5, 5, 5)
      this.scene.add(directionalLight)
    },

    loadModel() {
      const loader = new GLTFLoader()
      // 将你的GLB模型文件放在public/models目录下
      loader.load(
        '/glb/nhcj.glb',
        gltf => {
          console.log("加载完成")
          const model = gltf.scene
          this.scene.add(model)

          // 如果有动画
          if (gltf.animations.length) {
            this.mixer = new THREE.AnimationMixer(model)
            gltf.animations.forEach(clip => {
              this.mixer.clipAction(clip).play()
            })
          }

          // 自动调整模型位置
          const box = new THREE.Box3().setFromObject(model)
          const center = box.getCenter(new THREE.Vector3())
          model.position.sub(center)
          this.animate()
        },
        (e)=>{
        },
        error => {
          console.error('Error loading model:', error)
        }
      )
    },

    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
    },

    animate() {
      requestAnimationFrame(this.animate)
      if (this.mixer) {
        this.mixer.update(0.0167) // 更新动画
      }
      this.controls.update()
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
</style>